<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
      .height25{
        width: 100%;
        height: 2.5rem;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
      }
      .user_box{
        width: 100%;
        margin-top: 0rem;
      }

      /***order_inner***/
      .order_inner{
        margin-top: 7rem;
      }
      .order_inner_banner{
        width: 100%;
        position: relative;
      }
      .order_inner_top{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 2.7rem;
      }
      .order_inner_top h5{
        font-size: 1.7rem;
        color: #fff;
        line-height: 1;
        margin-top: 2.6rem;
      }
      .order_inner_top h5 img{
        display: inline-block;
        width: 1.6rem;
        margin-right: 0.7rem;
      }
      .order_inner_top p{
        font-size: 1.4rem;
        color: #fff;
        line-height: 1;
        float: right;
      }

      .order_inner_xx{
        width: calc(100% - 2.6rem);
        margin: 0 auto;
        margin-top: -3.5rem;
        margin-bottom: 2rem;
        position: relative;
        background: #fff;
        z-index: 2;
        box-shadow: 0px 0.25rem 0.95rem 1px 	rgba(212, 211, 211, 0.5);
	      border-radius: 0.25rem;
        padding: 1.8rem 1.2rem 1.5rem 1.2rem;
      }

      .order_inner_wl{
        width: 100%;
        padding-left: 3.15rem;
        padding-right: 1.9rem;
        position: relative;
      }
      .order_inner_wl h5{
        font-size: 1.4rem;
        color: #000;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .order_inner_wl p{
        font-size: 1.2rem;
        color: #333333;
        margin-top: 0.5rem;
      }
      .order_inner_wl font{
        width: 1.9rem;
        position: absolute;
        top: 0.3rem;
        left: 0;
      }
      .order_inner_wl span{
        width: 0.5rem;
        position: absolute;
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }

      .order_inner_dz{
        width: 100%;
        padding-left: 3.15rem;
        position: relative;
        margin-top: 1.5rem;
      }
      .order_inner_dz h5{
        font-size: 1.4rem;
        color: #000;
      }
      .order_inner_dz h5 span{
        float: right;
        font-size: 1.4rem;
        color: #000;
      }
      .order_inner_dz p{
        font-size: 1.2rem;
        color: #333;
        margin-top: 0.6rem;
      }
      .order_inner_dz>font{
        width: 1.6rem;
        position: absolute;
        top: 0.3rem;
        left: 0;
      }

      .order_list{
        width: 100%;
        background: #fff;
        margin-bottom: 1rem;
      }
      .order_list_h{
        width: 100%;
        padding: 0 1.3rem;
      }
      .order_list_h h5{
        float: left;
        line-height: 4rem;
        font-size: 1.4rem;
        color: #000;
        letter-spacing: 0.05rem;
      }
      .order_list_h h5 img{
        display: inline-block;
      }
      .order_list_h h5 img.img1{
        width: 1.6rem;
        margin-right: 0.9rem;
        vertical-align: middle;
      }
      .order_list_h h5 img.img2{
        width: 0.55rem;
        margin-left: 1rem;
        vertical-align: middle;
      }
      .order_list_h p{
        float: right;
        line-height: 4rem;
        font-size: 1.3rem;
        color: #ed6a20;
        letter-spacing: 0.05rem;
      }
      .order_list_p{
        width: 100%;
      }
      .order_list_g{
        padding: 1.3rem 0;
        width: calc(100% - 2.6rem);
        margin: 0 auto;
        background-color: #fff;
        border-bottom: 1px solid #f2f2f2;
      }
      .order_list_img{
        width: 7.6rem;
        float: left;
      }
      .order_list_txt{
        width: calc(75% - 7.6rem);
        float: left;
        padding: 0 1.2rem;
      }
      .order_list_txt h5{
        font-size: 1.3rem;
        line-height: 1.5rem;
        color: #333333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .order_list_txt p{
        margin: 0.5rem 0;
        margin-bottom: 0.2rem;
      }
      .order_list_txt p span{
        font-size: 1.2rem;
        color: #999;
        margin-right: 0.2rem;
        line-height: 1;
      }

      .order_list_txt font{
        display: inline-block;
        font-size: 1rem;
      	color: #ed6a20;
        line-height: 1;
        padding: 0.3rem 0.5rem;
        border-radius: 0.1rem;
	      border: solid 1px #ed6a20;
      }
      .order_list_jg{
        float: right;
        text-align: right;
      }
      .order_list_jg h5{
        font-size: 1.4rem;
        color: #333;
        line-height: 1;
        margin-bottom: 0.9rem;
      }
      .order_list_jg p{
        font-size: 1.4rem;
        color: #999;
        line-height: 1;
        position: relative;
        margin-bottom: 0.9rem;
      }
      .order_list_jg p::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background: #999;
        top: 50%;
        left: 0;
      }
      .order_list_jg span{
        font-size: 1.2rem;
        color: #999;
        line-height: 1;
      }
      .order_list_all{
        width: calc(100% - 2.6rem);
        margin: 0 auto;
        padding: 1.3rem 0;
        border-bottom: 1px solid #f1f1f1;
        line-height: 1;
        color: #333;
        font-size: 1.3rem;
      }

      .order_list_btn{
        padding: 1rem 1.3rem;
        text-align: center;
        font-size: 1.4rem;
        color: #686868;
      }
      .order_list_btn img{
        width: 1.7rem;
        display: inline-block;
        margin-right: 1rem;
        vertical-align: middle;
        position: relative;
        top: -1px;
      }
      .order_list_text{
        width: 100%;
        padding: 0 1.3rem;
      }
      .order_list_text1{
        padding: 1rem 0;
      }
      .order_list_text1:nth-child(1){
        border-bottom: 1px solid #e5e5e5;
      }
      .order_list_text1 p{
        font-size: 1.3rem;
      	line-height: 1;
        padding: 0.5rem 0;
      	color: #333333;
      }


      .order_list_text2{
        padding: 1rem 0;
      }
      .order_list_text2:nth-child(1){
        border-bottom: 1px solid #e5e5e5;
      }
      .order_list_text2 p{
        font-size: 1.3rem;
      	line-height: 1;
        padding: 0.5rem 0;
      	color: #333333;
      }
      .order_list_text2 font{
        float: right;
      }
      .order_list_text2:last-child{
        text-align: right;
        padding: 1.5rem 0;
      }
      .order_list_text2:last-child font{
        color: #f01818;
        font-size: 1.7rem;
        position: relative;
        top: -0.2rem;
        margin-left: 0.5rem;
      }

      .order_inner_btn{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 999;
        background: #fff;
        padding: 1rem 1.3rem;
        text-align: right;
        box-shadow: 0px 0.15rem 1rem 0px rgba(4, 0, 0, 0.45);
      }
      .order_inner_btn span{
        display: inline-block;
        font-size: 1.3rem;
        color: #3e4244;
        line-height: 1;
        padding: 0.75rem 1.2rem;
        border-radius: 1.4rem;
	      border: solid 1px #9a9a9a;
        margin-left: 0.6rem;
      }
      .order_inner_btn span:last-of-type{
        color: #ed6a20;
        border: solid 1px #ed6a20;
      }

      .order_inner_box{
        padding-bottom:6rem;
      }
      /***order_inner***/
      /*支付模块css*/

      .pay-modular {
          /*背景*/
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          background: rgba(0, 0, 0, 0.5);
          z-index: 10;
          transition: 0.2s ease all
      }

      .modular-main {
          height: 43.95rem;
          width: 100%;
          float: left;
          position: absolute;
          bottom: 0;
          left: 0;
          background: #f2f2f2;
          border-radius: 1.25rem 1.25rem 0 0;
          /*transition: 0.5s ease all*/
          animation: myfirst 0.3s;
      }

      .modular-main-top {
          width: 100%;
          height: 4.6rem;
          box-sizing: border-box;
          border-bottom: 0.05rem solid #ebebeb;
          float: left;
          font-size: 1.8rem;
          line-height: 4.6rem;
          text-align: center;
          position: relative;
          border-radius: 1.25rem 1.25rem 0 0;
      }

      .pay-modular-colse {
          width: 1.3rem;
          height: 1.3rem;
          position: absolute;
          top: 1.6rem;
          left: 1.35rem;
      }

      @keyframes myfirst {
          0% {
              left: 0;
              bottom: -43.95rem;
          }
          100% {
              left: 0;
              bottom: 0;
          }
      }

      .modular-main-box {
          width: 100%;
          float: left;
      }

      .modular-select-pay {
          width: 100%;
          height: 39.35rem;
      }

      .modular-select-pay-money {
          width: 100%;
          height: 7.25rem;
          line-height: 7.25rem;
          font-size: 3.6rem;
          font-weight: 600;
          text-align: center;
          background: #fff;
          float: left;
      }

      .modular-select-list {
          width: 100%;
          float: left;
          background: #fff;
      }

      .modular-select-li {
          width: 100%;
          height: 6.05rem;
          float: left;
      }

      .li-img {
          width: 14.53%;
          float: left;
      }

      .li-content {
          width: 85.47%;
          float: left;
          height: 100%;
          position: relative;
          box-sizing: border-box;
          border-bottom: 0.05rem solid #ebebeb
      }

      .modular-select-li .li-content:last-child {
          border-bottom: none;
      }

      .li-content-title {
          width: 100%;
          height: 1.5rem;
          font-size: 1.5rem;
          line-height: 1.5rem;
          letter-spacing: 0.02rem;
          color: #171717;
          margin: 1.3rem 0 0.8rem 0;
      }

      .li-content-text {
          width: 100%;
          height: 1.1rem;
          font-size: 1.1rem;
          line-height: 1.1rem;
          color: #848689;
      }

      .alipay {
          width: 2.45rem;
          height: 2.45rem;
          margin: 1.85rem auto auto auto;
      }

      .weixinpay {
          width: 2.5rem;
          height: 2.5rem;
          margin: 1.75rem auto auto auto;
      }

      .h5pay {
          width: 3rem;
          height: 2.4rem;
          margin: 1.75rem auto auto auto;
      }

      .balancepay {
          width: 2.5rem;
          height: 2.5rem;
          margin: 1.85rem auto auto auto;
      }

      .li-content-check {
          float: right;
          display: inline-block;
          position: absolute;
          top: 2rem;
          right: 1.35rem;
      }

      .li-content-check img {
          width: 1.95rem;
          height: 1.95rem;
      }

      .modular-select-bottom {
          width: 100%;
          height: 7.9rem;
          float: left;
      }

      .modular-select-btn {
          width: 93%;
          height: 4rem;
          background-color: #ed6a20;
          border-radius: 1.98rem;
          margin: auto;
          font-size: 1.6rem;
          line-height: 4rem;
          text-align: center;
          color: #ffffff;
          margin: 2.4rem auto 0 auto;
      }

      .modular-ipt-password {
          height: 39.35rem;
          width: 100%;
          position: relative;
          float: left;
      }

      .ipt-password {
          width: 93%;
          height: 4.65rem;
          border-radius: 0.5rem;
          border: solid 0.05rem #888888;
          display: flex;
          margin: 2.7rem auto 1.25rem auto;
      }

      .ipt-password-i {
          width: 100%;
          height: 100%;
          text-align: center;
          line-height: 4.65rem;
          border-right: 0.05rem solid #888888;
      }

      .ipt-password .ipt-password-i:last-child {
          border-right: none;
      }

      .ipt-password-i .i-icon {
          width: 2rem;
          height: 2rem;
          margin: 1.325rem auto auto auto;
          background: #000;
          border-radius: 100%;
      }

      .forget {
          width: 100%;
          text-align: right;
          font-size: 1.5rem;
          line-height: 1.5rem;
          height: 1.5rem;
          color: #ed6a20;
          box-sizing: border-box;
          padding: 0 1.5rem;
      }

      .keyboard {
          width: 100%;
          float: left;
          position: absolute;
          bottom: 0;
          left: 0;
          background: #fff;
      }

      .keyboard-btn {
          width: 33.33%;
          float: left;
          height: 5.1rem;
          box-sizing: border-box;
          border-bottom: 0.05rem solid #8d8d8d;
          border-right: 0.05rem solid #8d8d8d;
      }

      .keyboard-btn-text {
          width: 100%;
          font-size: 2rem;
          line-height: 2rem;
          font-weight: 600;
          text-align: center;
          margin: 1rem 0 0 0;
          float: left;
      }

      .keyboard-btn-en {
          width: 100%;
          height: 0.85rem;
          line-height: 0.85rem;
          font-size: 0.85rem;
          text-align: center;
          float: left;
          margin: 0.6rem 0 0 0;
      }

      .text-zero {
          margin: 1.65rem 0 0 0;
      }

      .border-r-none {
          border-right: none;
      }

      .border-b-none {
          border-bottom: none;
      }

      .bgd2d5db {
          background: #d2d5db
      }

      .delete-num {
          width: 2.4rem;
          height: 1.7rem;
          margin: 1.95rem auto 0 auto;
      }

      .bgfff {
          background: #fff
      }

      .bgf2 {
          background: #f2f2f2
      }

      .pay-modular-arrow {
          width: 0.75rem;
          height: 1.45rem;
          position: absolute;
          top: 1.5rem;
          left: 1.3rem;
      }
    </style>
</head>
<body style="background: #fff;">
<div id="app">
  <div class="height25"></div>

  <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
    <a class="aui-pull-left aui-btn" onclick="goBack()">
        <img src="../../image/back.png">
    </a>
    <div class="aui-title">订单详情</div>
  </header>

  <div class="aui-refresh-content order_inner_box">
    <!--order_inner-->
    <div class="order_inner">
      <div class="order_inner_banner">
        <img src="../../image/order_inner_banner.jpg" width="100%">
        <div class="order_inner_top">
          <h5><img src="../../image/user_inner_sj.png">{{delivery}}<p>还剩<font>8</font>天<font>12</font>时自动确认</p></h5>
        </div>
      </div>

      <div class="order_inner_xx">
        <div class="order_inner_wl">
          <font><img src="../../image/user_inner_wl.png" width="100%"></font>
          <h5>{{delivery_status}}</h5>
          <!-- <h5>快件已签收，签收人:峰宝宝。感谢您使用峰峰快递，期待再次为您再次服务</h5> -->
          <p>{{status_time}}</p>
          <span><img src="../../image/go.png" width="100%"></span>
        </div>
        <div class="order_inner_dz">
          <font><img src="../../image/user_inner_dz.png" width="100%"></font>
          <h5>收货人：<font>{{address_list.consignee}}</font><span>{{address_list.telephone}}</span></h5>
          <p>收货地址：{{address_list.province}}  {{address_list.city}}  {{address_list.province}}</p>
        </div>
      </div>

      <div class="order_list">
        <div class="order_list_h clearfix">
          <h5><img class="img1" :src="goods_list.store_logo">{{goods_list.store_name}}<img class="img2" src="../../image/go.png"></h5>
          <p>{{delivery}}</p>
        </div>
        <div class="order_list_p"  v-for="item in new_list">
          <div class="order_list_g clearfix" >
            <div class="order_list_img">
              <img :src="item.goods_pic" width="100%">
            </div>
            <div class="order_list_txt">
              <h5>{{item.goods_name}}</h5>
              <p><span>大红</span><span>印花</span><span>M</span></p>
            </div>
            <div class="order_list_jg">
              <h5>￥{{item.goods_price}}</h5>
              <p>￥999.80</p>
              <span>x{{item.goods_nums}}</span>
            </div>
          </div>

          <!-- <div class="order_list_g clearfix">
            <div class="order_list_img">
              <img src="../../image/user_order_product.jpg" width="100%">
            </div>
            <div class="order_list_txt">
              <h5>短袖衬衫韩范女装夏短袖衬衫韩范新款单排多扣上衣...</h5>
              <p><span>大红</span><span>印花</span><span>M</span></p>
            </div>
            <div class="order_list_jg">
              <h5>￥899.80</h5>
              <p>￥999.80</p>
              <span>x1</span>
            </div>
          </div> -->
        </div>
        <div class="order_list_all">
          买家留言：颜色不要发错了，尽快发货哦
        </div>
        <div class="order_list_btn">
          <img src="../../image/order_innder_xx.png">
          联系买家
        </div>
      </div>

      <div class="space1"></div>

      <div class="order_list_text">
        <div class="order_list_text1">
          <p>订单编号：<font>{{order_list.order_no}}</font></p>
          <p>下单时间：<font>{{order_list.order_time}}</font></p>
        </div>
        <div class="order_list_text1">
          <p>配送方式：<font>普通快递</font></p>
          <p>发票类型：<font>不开发票</font></p>
        </div>
      </div>

      <div class="space1"></div>

      <div class="order_list_text">
        <div class="order_list_text2">
          <p>商品合计<font>¥{{order_list.total_price}}</font></p>
          <p>运费<font>+¥0.00</font></p>
        </div>
        <div class="order_list_text2">
          <p>实付款:<font>¥1129.60</font></p>
        </div>
      </div>

    </div>
    <!--/order_inner-->
  </div>


  <div class="order_inner_btn" v-if="show_footer">
    <span onclick="goWl()" v-if="look_at">查看物流</span>
    <span onclick="openDialog('extend')" v-if="extend">延长收货</span>
    <span onclick="openDialog('confirm')" v-if="confirmation">确认收货</span>
    <span v-if="reminding" @click="Reminding">提醒发货</span>
    <span v-if="show_order" @click="cel_order">取消订单</span>
    <span v-if="show_pay" @click="z_pay">支付</span>
  </div>

  <!-- 支付模块 -->
  <div class="pay-modular" v-if="is_pay==0?false:true">
      <div class="modular-main">
          <div class="modular-main">
              <div class="modular-main-top" :class="pay_modular==0?'bgfff':'bgf2'">
                  <img src="../../image/user/order_true/pay/close.png" alt="" class="pay-modular-colse" @click="close_pay_modular" v-if="pay_modular==0?true:false">
                  <img src="../../image/user/order_true/pay/arrow_2.png" alt="" class="pay-modular-arrow" @click="back_pay_modular" v-if="pay_modular==1?true:false"> {{pay_modular==0?"确认付款":"请输入支付密码"}}
              </div>
              <div class="modular-main-box">
                  <div class="modular-select-pay" v-if="pay_modular==0?true:false">
                      <div class="modular-select-pay-money">
                          ￥{{ order_all_money }}
                      </div>
                      <div class="modular-select-list">
                          <div class="modular-select-li" v-for="(item,key) in pay_function" @click="select_pay_fun(key)">
                              <div class="li-img">
                                  <img :src="item.url" alt="" :class="item.en">
                              </div>
                              <div class="li-content">
                                  <div class="li-content-title">
                                      {{item.name}}
                                  </div>
                                  <div class="li-content-text">
                                      {{item.describe}}
                                  </div>
                                  <div class="li-content-check">
                                      <img :src="is_pay_fun==key?'../../image/user/order_true/pay/check_on.png':'../../image/user/order_true/pay/check_off.png'" alt="">
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="modular-select-bottom">
                          <div class="modular-select-btn" @click="open_pay_ipt">
                              立即付款
                          </div>
                      </div>
                  </div>
                  <div class="modular-ipt-password" v-if="pay_modular==1?true:false">
                      <div class="ipt-password">
                          <div class="ipt-password-i" v-for="(item,key) in ipt_box">
                              <div class="i-icon" v-if="item.num?true:false"></div>
                          </div>
                      </div>
                      <div class="forget">忘记密码？</div>
                      <div class="keyboard">
                          <div class="keyboard-btn" v-for="(item,key) in pay_num" :class="item.additional_class" @click="check_ipt(key)">
                              <div class="keyboard-btn-text" v-if="key<11?true:false" :class="key==10?'text-zero':''">
                                  {{item.num}}
                              </div>
                              <div class="keyboard-btn-en" v-if="key<10?true:false">
                                  {{item.en}}
                              </div>
                              <img src="../../image/user/order_true/pay/delete.png" alt="" class="delete-num" v-if="key==11?true:false">
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>


</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>

<script type="text/javascript">

  apiready = function(){
    // setRefresh()
    new Vue({
      el:"#app",
      data:{
        new_list:[],            //商品数组
        order_list:'',          //商品信息
        address_list:'',        //地址信息
        goods_list:'',          //订单商品列表
        delivery:'',            //是否发货
        delivery_status:'',     //是否发货状态下,做些提示
        status_time:'',          //时间状态的改变
        look_at:false,
        extend:false,
        confirmation:false,
        reminding:false,
        show_order:false,
        show_pay:false,
        show_footer:true,
        out_trade_no:'',
        is_pay: 0,         //是否呼出输入弹窗 0=关闭 1弹出
        is_pay_fun: 0,     //支付方式0-3 顺序选择
        pay_modular: 0,    //0=选择支付方式 1=输入密码
        pay_function: [{
            id: 1,
            name: "支付宝",
            describe: "支付宝安全支付",
            url: "../../image/user/order_true/pay/alipay.png",
            en: "alipay"
        }, {
            id: 2,
            name: "微信支付",
            describe: "微信安全支付",
            url: "../../image/user/order_true/pay/weixinpay.png",
            en: "weixinpay"
        }, {
            id: 3,
            name: "银行卡支付",
            describe: "推荐使用银行卡",
            url: "../../image/user/order_true/pay/h5pay.png",
            en: "h5pay"
        }, {
            id: 4,
            name: "余额支付",
            describe: "推荐使用余额支付",
            url: "../../image/user/order_true/pay/balancepay.png",
            en: "balancepay"
        }, ],
        pay_num: [{
            id: 1,
            num: 1,
            en: "",
            additional_class: "",
        }, {
            id: 2,
            num: 2,
            en: "A B C",
            additional_class: "",
        }, {
            id: 3,
            num: 3,
            en: "D E F",
            additional_class: "border-r-none",
        }, {
            id: 4,
            num: 4,
            en: "G H I",
            additional_class: "",
        }, {
            id: 5,
            num: 5,
            en: "J K L",
            additional_class: "",
        }, {
            id: 6,
            num: 6,
            en: "M N O",
            additional_class: "border-r-none",
        }, {
            id: 7,
            num: 7,
            en: "P Q R S",
            additional_class: "",
        }, {
            id: 8,
            num: 8,
            en: "T U V",
            additional_class: "",
        }, {
            id: 9,
            num: 9,
            en: "W X Y Z",
            additional_class: "border-r-none",
        }, {
            id: 10,
            num: "",
            en: "",
            additional_class: "border-b-none bgd2d5db",
        }, {
            id: 11,
            num: 0,
            en: "",
            additional_class: "border-b-none",
        }, {
            id: 12,
            num: "-2",
            en: "",
            additional_class: "border-r-none border-b-none bgd2d5db",
            url: "../../image/user/order_true/pay/delete.png"
        }, ],
        ipt_box: [{
            num: ""
        }, {
            num: ""
        }, {
            num: ""
        }, {
            num: ""
        }, {
            num: ""
        }, {
            num: ""
        }],
      },
      methods:{
        Reminding:function(){    //提醒发货
          var token = $api.getStorage('token');                        //获取用户token
          var order_no = this.order_list.order_no                      //订单编号
          var data = {
              token:token,
              order_no:order_no
          }
          Axios.post(window.Url.get_order_express, data).then(function(res){
              console.log(JSON.stringify(res));
          })
        },
        cel_order:function(){     //取消订单
          var token = $api.getStorage('token');                        //获取用户token
          var order_no = this.order_list.order_no                      //订单编号
          var data = {
              token:token,
              order_no:order_no
          }
          // console.log(JSON.stringify(data))
          Axios.post(window.Url.cancle_order, data).then(function(res){
              console.log(JSON.stringify(res));
          })
        },
        z_pay:function(){
          var token = $api.getStorage('token');                        //获取用户token
          var order_no = this.order_list.order_no                      //订单编号
          var data_sure = {
              token:token,
              type:0,
              order_no:order_no
          }
          var that = this
          Axios.post(window.Url.before_pay_info, data_sure).then(function(res){
              console.log(JSON.stringify(res));
              that.out_trade_no = res.out_trade_no
              that.is_pay=1
              that.show_footer=false
              // console.log(JSON.stringify(that.order_list.total_price))
              that.order_all_money=that.order_list.total_price1234456
          })
        },
        //输入按键
        check_ipt: function(key) {
            var num = this.pay_num[key].num //获取按键
            var ipt_num = this.ipt_num
            var ipt_box = this.ipt_box
            console.log(ipt_num.length)
            if (num == -2) { //如果是删除键
                if (ipt_num.length > 0) {
                    ipt_box[ipt_num.length - 1].num = ""
                    ipt_num = ipt_num.substring(0, ipt_num.length - 1)
                    console.log(ipt_num)
                        // console.log(ipt_box)
                    this.ipt_num = ipt_num;
                    this.ipt_box = ipt_box
                }
                return false
            }
            if (ipt_num.length < 6) {
                ipt_num += String(num)
                console.log(ipt_num)
                var length = ipt_num.length
                ipt_box[length - 1].num = num
                this.ipt_num = ipt_num;
                this.ipt_box = ipt_box
                if (ipt_num.length == 6) {
                    this.walletPay(ipt_num)
                }
            }

        },
        //后退
        back_pay_modular: function() {
            this.pay_modular = 0
        },
        //选择支付方式
        select_pay_fun: function(key) {

            this.is_pay_fun = key;
            console.log(this.is_pay_fun);
        },
        //切换输入密码
        open_pay_ipt: function() {
            var is_pay_fun = this.is_pay_fun
            if (is_pay_fun == 0) {
                this.alipayPay();
                return;
            }
            if (is_pay_fun == 1) {
                this.wechatPay();
                return;
            }
            if (is_pay_fun == 2) {
                api.toast({
                    msg: '功能还在开发中，敬请期待',
                    duration: 2000,
                    location: 'bottom'
                });
            }
            if (is_pay_fun == 3) { //如果为余额支付时
                this.pay_modular = 1;
                return;
            }
        },
        //余额支付
        walletPay: function(pay_password) {
            let data = {
                token: $api.getStorage('token'),
                out_trade_no: this.out_trade_no,
                pay_password: pay_password,
            }
            console.log(JSON.stringify(data));
            Axios.post(window.Url.walletPay, data).then((res) => {
                console.log(JSON.stringify(res));

                if (res.status == 0) {
                    this.ipt_box = [{
                        num: ""
                    }, {
                        num: ""
                    }, {
                        num: ""
                    }, {
                        num: ""
                    }, {
                        num: ""
                    }, {
                        num: ""
                    }]
                    this.ipt_num = ''
                }

                api.toast({
                    msg: res.info,
                    duration: 2000,
                    location: 'bottom'
                });

                if (res.status == 1) {
                    setTimeout(() => {
                        this.goOrderList()
                    }, 1000)
                }

            }).catch((err) => {
                api.alert({
                    msg: JSON.stringify(err)
                });
            })
        },
        //微信支付
        wechatPay: function() {
            let weiXin = api.require('weiXin');
            var $_this = this;
            let data = {
                token: $api.getStorage('token'),
                out_trade_no: $_this.out_trade_no,
                type: 0,
            }
            console.log(JSON.stringify(data));
            Axios.post(window.Url.wechatPay, data).then((res) => {
                if (res.status == 1) {
                    weiXin.payOrder({
                        orderId: res.prepayid,
                        partnerId: res.partnerid,
                        nonceStr: res.noncestr,
                        timeStamp: res.timestamp,
                        package: res.package,
                        sign: res.sign
                    }, function(ret, err) {
                        if (ret.status) {} else {}
                    });
                }
            }).catch((err) => {
                api.alert({
                    msg: JSON.stringify(err.info)
                });
            })

        },
        // 支付宝支付
        alipayPay: function() {
            var $_this = this;
            let data = {
                token: $api.getStorage('token'),
                out_trade_no: $_this.out_trade_no,
                type: 0,
            }
            console.log(JSON.stringify(data))
            Axios.post(window.Url.alipayPay, data).then((res) => {
                console.log(JSON.stringify(res));
                if (res.status == 1) {
                    console.log(res.info);
                    var aliPay = api.require('aliPay');
                    aliPay.payOrder({
                        // orderInfo: 'app_id=2018030502318781&biz_content=%7B%22body%22%3A%22%5Cu751f%5Cu610f%5Cu5e2eAPP%5Cu8d2d%5Cu7269%5Cu652f%5Cu4ed8%22%2C%22subject%22%3A%22%5Cu751f%5Cu610f%5Cu5e2eAPP%5Cu8d2d%5Cu7269%5Cu652f%5Cu4ed8%22%2C%22out_trade_no%22%3A%2220181107165426ba81697745%22%2C%22timeout_express%22%3A%2230m%22%2C%22total_amount%22%3A%220.01%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2Ft.shunshiniao.net%2FApi%2FApi%2FFreeshopping_alipayCallback&sign_type=RSA2&timestamp=2018-11-07+16%3A54%3A30&version=1.0&sign=lLAeCEu1gcr1MYQinm%2FJj72RFvVroTFj1HvVkiU%2BG07Vk1dubBDQJisK90Y%2FnYnjG5vMgKuWd9w7pLKHnJajl0gcGV%2FoXcM4aXh7yO1g1zYeEi861TbJZ1u87tTT9S%2B2kTVZLxFUx%2FV0ZWdPfhhj55cGOi9oeqT%2BYeF5VpxSSyy7R%2FyHfLGf6iFh4AgQbwgxyUeSA1kl1%2BudKnc67YcmSzPVNLq3kiVpU1agaDixc1IDULs1TOeI978HLS%2B%2FWcpx7%2FGiG1RfSS0ttaaAzVpr3ZUnVz7UmK1LstVHusK6T7P2FNndFzZUHUJX28TlPM9K1SXbnT%2FPqaJGdxle%2FlDJeg%3D%3D'
                        orderInfo: res.info
                    }, function(ret, err) {
                        api.alert({
                            title: '支付结果',
                            msg: ret.code,
                            buttons: ['确定']
                        });
                    });
                }
            }).catch((err) => {
              console.log(JSON.stringify(err));
              console.log('这是返回是事件吗i')
                api.alert({
                    msg: JSON.stringify(err)
                });
            })

        },
        //关闭弹窗
        close_pay_modular: function() {
            this.is_pay = 0;
            this.show_footer=true;
        },
      },
      mounted:function(){
        var that = this
        var order_no = api.pageParam.order_s      //获取订单编号
        console.log(order_no)
        var token = $api.getStorage('token');
        var data = {
          token:token,
          order_no:order_no
        }
        Axios.post(window.Url.order_detail, data).then(function(res){   //获取订单详情
            console.log(JSON.stringify(res));
            if(res.status==1){
              that.order_list = res.order_info
              that.address_list = res.address_info
              that.goods_list = res.goods_list
              for(var a=0;a<res.goods_list.list.length;a++){
                    that.new_list.push(res.goods_list.list[a])
                    // console.log(JSON.stringify(that.new_list))
              }
              if(that.order_list.order_status==0){
                  that.delivery='已取消'
                  that.delivery_status='已取消订单'
                  that.show_order=false                              //取消订单
                  that.show_pay=false                                 //支付
              }else if(that.order_list.pay_status==1){
                  that.delivery='卖家已付款'
                  that.delivery_status='您的订单开始处理'
                  that.status_time = that.order_list.order_time         //
              }
              if(that.order_list.is_shipping==0){
                  that.delivery='卖家未发货'
                  that.delivery_status='卖家未发货,这里做相应的提示'
                  that.reminding=true                             //提醒发货
              }else
              if(that.order_list.is_shipping==1){
                  that.delivery='卖家已发货'
                  that.delivery_status='卖家已发货,这里做相应的提示'
                  that.look_at=true                             //查看物流
                  that.extend=true                              //延长收货
                  that.confirmation=true                        //确认收货
              }
              if(that.order_list.is_shipping&&that.order_list.is_confirm==0){
                  console.log('货物已经送达，但用户没有确认收货')
              }
              console.log(that.delivery)
            }
        })
      }
    })
  }

  //刷新
  function setRefresh(){
      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      }, function(ret) {

          if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
          }
      })
  }

  function goWl(){
    var order_no = api.pageParam.order_s
    console.log(order_no)
    api.openWin({
        name: 'user_wl',
        url: './user_wl.html',
        pageParam: {
            order_detail:order_no
        }
    });
  }


  function goBack(){
    api.closeWin({

    });
  }


  var dialog = new auiDialog({})
  function openDialog(type){
        switch (type) {
            case "extend":
                dialog.alert({
                    title:"确认延长收货时间？",
                    msg:'每笔订单只能延迟一次哦',
                    buttons:['取消','确定']
                },function(ret){
                    console.log(ret)
                })
                break;
            case "confirm":
                dialog.alert({
                    title:"是否确认收货？",
                    msg:'',
                    buttons:['取消','确定']
                },function(ret){
                    // console.log('是确认吗')
                    var token = $api.getStorage('token');                        //获取用户token
                    var order_no = api.pageParam.order_s                         //获取订单编号
                    var data = {
                        token:token,
                        order_no:order_no
                    }
                    Axios.post(window.Url.confirm_order, data).then(function(res){
                          console.log(JSON.stringify(res));
                    })
                })
                break;
            default:
                break;
        }
    }


</script>
